<template>
  <view class="page-container">
    <!-- 搜索区域 -->
    <view class="search-header">
      <navbar :show-back="false" bg-color="linear-gradient(180deg, #e84d1c 0%, #f06e44 100%)">
        <template #center>
          <view class="search-wrapper">
            <view class="custom-search-bar" @click="navigateToSearch">
              <view class="search-icon">
                <uni-icons type="search" size="18" color="#e84d1c"></uni-icons>
              </view>
              <text class="search-placeholder">请搜索商品</text>
            </view>
          </view>
        </template>
      </navbar>
    </view>
    
    <!-- 分类内容区域 -->
    <view class="category-container">
      <!-- 左侧分类菜单 -->
        <scroll-view scroll-y scroll-with-animation
                  class="category-menu" 
                  :scroll-top="scrollTop">
        <view v-for="(item, index) in cateTree" 
              :key="index" 
              class="category-menu-item"
              :class="[current == index ? 'category-menu-item-active' : '']" 
              :data-current="index"
                @tap.stop="switchMenu(item, index)">
          <view class="category-menu-icon" v-if="current == index">
            <uni-icons type="right" size="14" color="#e84d1c"></uni-icons>
          </view>
          <text class="category-menu-text">{{ item.categoryName }}</text>
          </view>
        </scroll-view>
      
      <!-- 右侧分类内容 -->
      <scroll-view scroll-y class="category-content">
        <view class="category-title" v-if="itemList && itemList.length > 0">
          <view class="title-decoration"></view>
          <text>{{ cateTree[current].categoryName }}</text>
          <view class="title-decoration"></view>
        </view>
        
        <view class="category-grid" :class="{'animate-fade-in': animateGrid}">
          <view v-for="(row, rowIndex) in itemList" 
                :key="row.id" 
                class="category-item"
                :style="{'animation-delay': rowIndex * 0.05 + 's'}"
                @click="viewDetails(row)">
            <view class="category-item-wrapper">
              <view class="category-image-container">
                <image
                  v-if="row.image && getImageUrl(row.image)" 
                  :src="getImageUrl(row.image)"
                  mode="aspectFill"
                  class="category-image">
                </image>
                <view v-else class="category-empty-image">
                  <uni-icons type="shop-filled" size="40" color="#e2e2e2"></uni-icons>
                </view>
                <view class="image-overlay">
                  <view class="view-more">查看</view>
                </view>
                <view class="category-tag" v-if="row.id % 3 === 0">热门</view>
              </view>
              <text class="category-item-name">{{ row.categoryName }}</text>
            </view>
          </view>
        </view>
        
        <up-empty class="empty-content" v-if="!itemList || itemList.length === 0"></up-empty>
        </scroll-view>
    </view>
  </view>

  <!-- 添加自定义Tabbar组件 -->
  <custom-tabbar />
</template>

<script>
import Navbar from "@/components/navbar"
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {listProductCategory} from "@/api/sell/productCategory";
import {listByIds} from "@/api/system/oss";
import CustomTabbar from '@/components/custom-tabbar/index.vue';

export default {
  components: {
    UniIcons,
    Navbar, 
    CustomTabbar
  },
  data() {
    return {
      cateTree: [],
      scrollTop: 0, //tab标题的滚动条位置
      current: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      itemList: [],
      imageCache: {}, // 缓存图片URL
      search: '',
      animateGrid: true
    }
  },
  methods: {
    navigateToSearch() {
      uni.navigateTo({
        url: '/pages/sellment/search/search'
      })
    },
    // 点击左边的栏目切换
    async switchMenu(item, index) {
      if (index == this.current) return;
      this.current = index;

      // 重置动画效果
      this.animateGrid = false;
      setTimeout(() => {
        this.animateGrid = true;
      }, 50);

      // 将菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
      this.itemList = item.children;
      
      // 加载图片
      this.loadImages();
    },
    viewDetails(row) {
      uni.navigateTo({
        url: `/pages/sellment/product/list?categoryId=${row.id}`
      })
    },
    // 获取图片URL
    async loadImages() {
      // 收集所有的ossId
      const ossIds = this.itemList
        .filter(item => item.image && !this.imageCache[item.image])
        .map(item => item.image);
      
      if (ossIds.length === 0) return;
      
      try {
        // 一次性请求所有图片
        const response = await listByIds(ossIds.join(','));
        if (response.code === 200 && response.data) {
          // 更新缓存
          response.data.forEach(item => {
            this.imageCache[item.ossId] = item.url;
          });
          // 强制更新视图
          this.$forceUpdate();
        }
      } catch (error) {
        console.error('加载图片失败', error);
      }
    },
    // 获取图片URL的方法
    getImageUrl(ossId) {
      return this.imageCache[ossId] || '';
    }
  },
  async onShow() {
    const {data} = await listProductCategory({
      isVisible: 1
    });
    this.cateTree = data;
    this.itemList = this.cateTree[this.current].children;
    
    // 加载图片
    this.loadImages();
    
    // 计算左侧菜单高度
    uni.getSystemInfo({
      success: (res) => {
        this.menuHeight = res.windowHeight - 110; // 减去顶部搜索的高度
        this.menuItemHeight = 100;
      }
    });
  },
}
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
  position: relative; /* 确保容器有正确的定位上下文 */
  overflow: hidden; /* 防止内容溢出 */
  
  /* 添加底部装饰效果 */
  &::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10vh;
    background: linear-gradient(to top, rgba(232, 77, 28, 0.03), transparent);
    z-index: 0;
    pointer-events: none;
  }
}

.search-header {
  background: linear-gradient(180deg, #e84d1c 0%, #f06e44 100%);
  padding: 0;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  
  /* 直接覆盖uview-plus导航栏样式 */
  :deep(.u-navbar__content) {
    background: linear-gradient(180deg, #e84d1c 0%, #f06e44 100%) !important;
    height: 100rpx !important;
  }
   
  :deep(.uni-navbar__header-container) {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
  }
}

.search-wrapper {
  width: 100%; 
  padding: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.custom-search-bar {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 40rpx;
  height: 70rpx;
  padding: 0 30rpx;
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.2s;
  width: 100%;
  
  &:active {
    transform: scale(0.98);
    background-color: rgba(255, 255, 255, 0.95);
  }
  
  .search-icon {
    width: 36rpx;
    margin-right: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e84d1c;
  }
  
  .search-placeholder {
    color: #999;
    font-size: 28rpx;
    flex: 1;
    line-height: 1;
  }
}

// 分类容器
.category-container {
  display: flex;
  flex: 1;
  position: relative; /* 为分界线定位基准 */
  height: calc(100vh - 220rpx); /* 减去顶部搜索栏和状态栏高度 */
  margin-top: 30rpx; /* 保持顶部边距 */
}

// 左侧菜单样式
.category-menu {
  width: 180rpx;
  height: 100%;
  background-color: #fff;
  box-shadow: 2rpx 0 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  border-right: 1rpx solid #eaeaea; /* 右侧边框作为分界线 */
  z-index: 2;
  flex-shrink: 0; /* 防止菜单收缩 */
}

.category-menu-item {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20rpx;
    right: 20rpx;
    height: 1rpx;
    background-color: #f0f0f0;
  }
}

.category-menu-icon {
  position: absolute;
  right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-menu-text {
  font-size: 26rpx;
  color: #666;
  padding: 0 20rpx;
  text-align: center;
  transition: all 0.3s;
}

.category-menu-item-active {
  background: linear-gradient(90deg, #fff5f1 0%, #fff 100%);
  
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 36rpx;
    width: 6rpx;
    background: linear-gradient(to bottom, #e84d1c 0%, #f06e44 100%);
    border-radius: 0 3rpx 3rpx 0;
}

  .category-menu-text {
    color: #e84d1c;
    font-weight: bold;
  }
  
  &::after {
    display: none;
  }
}

// 右侧内容区域
.category-content {
  flex: 1;
  background-color: white;
  padding: 20rpx;
  height: 100%;
  position: relative;
  border-left: 1rpx solid #f2f2f2; /* 左侧微弱边框增强分界线效果 */
  box-shadow: -4rpx 0 12rpx rgba(0, 0, 0, 0.02); /* 添加内阴影效果强化分界 */
  overflow-y: auto; /* 确保内容可以滚动 */
  -webkit-overflow-scrolling: touch; /* 增强iOS滚动体验 */
}

.category-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10rpx; /* 添加顶部边距 */
  margin-bottom: 30rpx;
  
  text {
  font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin: 0 20rpx;
  }
}

.title-decoration {
  height: 2rpx;
  width: 60rpx;
  background: linear-gradient(90deg, transparent, #e84d1c, transparent);
}

.category-grid {
  display: flex;
  flex-wrap: wrap;
  opacity: 0;
  margin: 0 15rpx;
  
  &.animate-fade-in {
    animation: fadeIn 0.5s forwards;
  }
}

.category-item {
  width: 50%;  /* 改为两列布局 */
  margin-bottom: 20rpx;
  animation: slideUp 0.5s forwards;
  opacity: 0;
  padding: 0 10rpx;
  box-sizing: border-box;
}

.category-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  height: 100%;
  transition: all 0.2s;
  
  &:active {
    transform: scale(0.97);
    box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.05);
  }
}

.category-tag {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background: linear-gradient(135deg, #ff7b00 0%, #ff6b00 100%);
  color: white;
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  z-index: 3;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(255, 107, 0, 0.2);
}

.category-image-container {
  width: 200rpx;  /* 增加图片尺寸 */
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  border-radius: 12rpx;
  background-color: #fafafa;
  overflow: hidden;
  transition: all 0.3s;
  position: relative;
  
  .category-image {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    object-fit: cover;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 107, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s;
    border-radius: 12rpx;
    z-index: 2;
  }

  &:active .image-overlay {
    opacity: 1;
  }
  
  .view-more {
    color: white;
    font-size: 26rpx;
    background-color: rgba(255, 255, 255, 0.25);
    padding: 8rpx 24rpx;
    border-radius: 30rpx;
    font-weight: 500;
  }
}

.category-empty-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  
  :deep(.uni-icons) {
    font-size: 60rpx;
    color: #ddd;
  }
}

.category-item-name {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10rpx;
  line-height: 1.5;
  font-weight: 500;
}

.empty-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20rpx);
}
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
